<template>
  <div class="checkout-summary">
    <h2>结算明细</h2>
    <div class="summary-item">
      <span>商品总数：</span>
      <span>{{ totalQuantity }}件</span>
    </div>
    <div class="summary-item">
      <span>商品总价：</span>
      <span class="price">￥{{ totalPrice.toFixed(2) }}</span>
    </div>
    <div class="summary-item discount" v-if="discount > 0">
      <span>优惠金额：</span>
      <span class="price">-￥{{ discount.toFixed(2) }}</span>
    </div>
    <div class="summary-item total">
      <span>应付总额：</span>
      <span class="price">￥{{ finalPrice.toFixed(2) }}</span>
    </div>
    <button
      class="checkout-btn"
      @click="checkout"
      :disabled="selectedCount === 0"
    >
      结算 ({{ selectedCount }}件)
    </button>
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  products: {
    type: Array,
    required: true,
    default: () => []
  },
  discount: {
    type: Number,
    default: 0
  }
})

const router = useRouter()
// const emit = defineEmits(['checkout'])

const selectedCount = computed(() => {
  return props.products.filter(p => p.selected).reduce((sum, p) => sum + p.quantity, 0)
})

const totalQuantity = computed(() => {
  return props.products.filter(p => p.selected).reduce((sum, p) => sum + p.quantity, 0)
})

const totalPrice = computed(() => {
  return props.products
    .filter(p => p.selected)
    .reduce((sum, p) => sum + p.price * p.quantity, 0)
})

const finalPrice = computed(() => {
  return Math.max(0, totalPrice.value - props.discount)
})

const checkout = () => {
  if (selectedCount.value === 0) return

  // 构建商品订单数据
  const orderItems = props.products
    .filter(p => p.selected)
    .map(product => {
      let selectedColorName = ''
      if (Array.isArray(product.colors) && product.selectedColor !== undefined) {
        const color = product.colors.find(c => c.id === product.selectedColor)
        selectedColorName = color ? color.name : ''
      }

      return {
        itemId: product.itemId,
        itemTitle: product.title,
        quantity: product.quantity,
        price: product.price,
        image: product.image,
        selectedColor: selectedColorName,
        status: product.status
      }
    })

  // 跳转到订单确认页面并传递数据
  router.push({
    path: '/order/confirm',
    query: {
      orderItems: encodeURIComponent(JSON.stringify(orderItems)),
      totalAmount: finalPrice.value.toFixed(2)
    }
  })
}
</script>

<style scoped>
/* 样式保持不变 */
.checkout-summary {
  width: 300px;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  margin: 0 0 1.5rem 0;
  color: #333;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  color: #666;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
}

.discount .price {
  color: #52c41a;
}

.total {
  font-size: 1.2em;
  border-top: 1px solid #eee;
  padding-top: 1rem;
  margin-top: 1rem;
  color: #333;
}

.checkout-btn {
  width: 100%;
  padding: 12px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1.5rem;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.checkout-btn:hover:not(:disabled) {
  background: #ff7875;
}

.checkout-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>
